<template>
  <px-scrollbar v-if="!isMain && isView" class="view-equip-detail">
    <div class="view-task-detail">
      <div class="view-task-title">
        <px-button type="primary" icon="ArrowLeft" @click="backMainPage">返回</px-button>
        <div class="text">{{ taskDetailData.planName }}</div>
        <div class="status">
          <div class="circle" :style="{ backgroundColor: `${tagBgColorList[taskDetailData.planStatus]}` }" />
          <p :style="{ color: `${tagBgColorList[taskDetailData.planStatus]}` }">{{ taskDetailData.planStatusDesc }}</p>
        </div>
      </div>
      <div>
        <px-button @click="handleCopy">复制</px-button>
        <px-button v-if="taskDetailData.planStatus === 2 && taskDetailData.createBy === userInfo.userId" type="primary" plain @click="handleCancel">
          取消计划
        </px-button>
        <px-button
          v-if="taskDetailData.planStatus === 3 && taskDetailData.createBy === userInfo.userId"
          type="primary"
          plain
          @click="isEditPlanShow = true"
        >
          修改计划
        </px-button>
        <px-button v-if="[1, 2].includes(taskDetailData.planStatus)" plain type="primary" @click="handleEdit">编辑</px-button>
      </div>
    </div>
    <PlanDetail v-if="taskDetailData" :planDetailData="taskDetailData" />
    <EditPlanDialog :visible="isEditPlanShow" :rowData="taskDetailData" @closeDialog="isEditPlanShow = false" @queryTable="EditPlanBack" />
  </px-scrollbar>
</template>

<script setup lang="ts">
import { cancelExceptionList, detailExceptionList } from "@/api/equip/exception";
import { PxMessage, PxMessageBox } from "px-ui";
import { reactive, toRefs, watchEffect } from "vue";
import EditPlanDialog from "./EditPlanDialog.vue";
import PlanDetail from "./PlanDetail.vue";

// 调用父级-返回主页、查询列表方法
const emits = defineEmits(["backMainPage", "queryTable", "handleCopy", "handleEdit"]);

// 父级传过来的值
const props = defineProps(["isMain", "isView", "planNo"]);

const tagBgColorList = {
  1: "#909399", // 草稿
  2: "#F59E0B", // 未开始
  3: "#3B82F6", // 进行中
  4: "#10B981", // 已结束
  5: "#909399" // 已取消
};

const state = reactive<any>({
  taskDetailData: {},
  userInfo: {},
  isEditPlanShow: false
});

const { taskDetailData, userInfo, isEditPlanShow } = toRefs(state);

watchEffect(async () => {
  if (props.isView && !props.isMain) {
    userInfo.value = JSON.parse(localStorage.getItem("userInfo"));

    const res = await detailExceptionList(props.planNo);
    const { images } = res;
    if (images?.length > 0) {
      images?.forEach(item => {
        item.url = item.fileUrl;
      });
      res.imageIds = res.images;
    } else {
      res.imageIds = [];
    }

    taskDetailData.value = { ...res, imageIds: images };
  }
});

const EditPlanBack = () => {
  emits("queryTable");
  backMainPage();
};

const handleCopy = () => {
  emits("handleCopy", taskDetailData.value);
  taskDetailData.value = {};
};

const handleCancel = () => {
  PxMessageBox.confirm(`确认取消该计划吗？`, "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    draggable: true,
    type: "warning"
  })
    .then(async () => {
      await cancelExceptionList(props.planNo);
      PxMessage.success("取消成功");
      emits("backMainPage");
      emits("queryTable");
    })
    .catch(() => {});
};
const handleEdit = () => {
  emits("handleEdit", taskDetailData.value);
  taskDetailData.value = {};
};

const backMainPage = () => {
  taskDetailData.value = {};
  emits("backMainPage");
};
</script>

<style lang="scss" scoped>
@import url("@/views/all/equip/scss/view-detail.scss");

.view-equip-detail {
  padding: 20px;
}

.view-task-detail {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;

  .view-task-title {
    display: flex;
    flex-direction: row;
    align-items: center;

    .text {
      margin-right: 8px;
      margin-left: 16px;
      font-size: 20px;
      font-weight: 600;
      line-height: 1;
      color: rgb(0 0 0 / 90%);
    }

    .status {
      display: flex;
      flex-direction: row;
      align-items: center;
      line-height: 1;

      .circle {
        width: 8px;
        height: 8px;
        margin-right: 5px;
        border-radius: 50%;
      }
    }
  }
}
</style>
